<template>
    <header class="ui-c-f">

        <div v-for="tab of tabs" :class="[tab.status== selected?'select':'']" @click="changeTab(tab.status)">
            {{tab.title}}
        </div>
    </header>
    <div class="header-holder"></div>

    <div v-for="order of list" class="ui-box" v-link="{name:'order',params:{order_id:order._id}}">
        <div class="ui-bar order-id">
            <span>订单号</span>
            <b>{{order._id.substr(order._id.length-10,10)}}</b>

            <span style="float: right;">{{order.created|dateFormat 'yyyy-M-d hh:mm'}}</span>
        </div>
        <template v-if=" order.status != 0">
            <div v-for="val of order.children" class="child-order">
                <div class="bar-status child-order-status">
                    <div style="display: inline;font-size: 12px"><span style="color: #888">商家</span>
                        <span style="margin-left:10px;color: #111">{{val.supplier.name}}</span></div>
                    <div class="ui-c-f frame-status">
                        <span class="label-status">{{getStatusStr(val.status)}}</span>
                    </div>
                </div>
                <div class="supplier-product-list">
                    <div v-for="product of val.skus" class="product">

                        <img :src="product.pic+'?imageView2/2/w/200'">

                        <div class="tumb-top ui-c-f">
                            <div class="thum-price">
                                <div class="ui-price price-red">{{product.price/10}}</div>
                                <div v-if="product.price_cost" class="ui-price price-gray">{{product.price_cost/10}}
                                </div>
                            </div>
                            <h1>
                                {{product.title}}
                            </h1>
                        </div>
                        <div class="quantity">{{product.quantity}}</div>
                    </div>
                </div>
            </div>
        </template>
        <!-- 状态==0时使用 -->
        <div v-else class="product-list">
            <div v-for="val of order.skus" class="product">
                <img :src="val.pic+'?imageView2/2/w/200'">

                <div class="tumb-top ui-c-f">
                    <div class="thum-price">
                        <div class="ui-price price-red">{{val.price/10}}</div>
                        <div v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</div>
                    </div>
                    <h1>
                        {{val.title}}
                    </h1>
                </div>
                <div class="quantity">{{val.quantity}}</div>
            </div>
        </div>

        <div class="ui-bar bar-status order-status">
            <div class="amout">
                <b>合计</b>
                <span class="ui-price">{{order.needPay/10}}</span>
            </div>

            <div v-if="order.status == 0" class="ui-c-f frame-status">
                <template v-if="!order.cancel">
                    <button class="btn-cancel"><span>取消</span>
                    </button>
                    <button class="ui-btn-yellow btn-pay" i-tap="clickfb"><span>付款</span>
                    </button>
                </template>
                <button v-else class="label-canceled" style="color: #888">
                    <span>{{ order.cancel==4?'支付超时':'已取消'}}</span>
                </button>
            </div>
        </div>
    </div>

    <div class="tips">
        没有更多订单
    </div>
</template>

<script type="text/babel">
    import http from '../libs/http'

    export default{
        data(){
            return {
                selected: null, //默认全部
                tabs: [
                    {
                        title: '全部',
                        status: 999
                    }, {
                        title: '待支付',
                        status: 0
                    }, {
                        title: '待收货',
                        status: 30
                    }, {
                        title: '已取消',
                        status: -1
                    }
                ],

                list: []
            };
        },
        watch: {
            selected: function (nVal, oVal) {
                this.getData();
            }
        },
        attached: function () {
            if (positionCache[this.$route.path]) {
                this.nextTick(function () {
                    window.scrollTo(0, positionCache[this.$route.path]);
                });
            }
        },
        ready: function () {
            var self = this;
            self.selected = 999;
        },
        methods: {
            changeTab: function (status) {
                this.selected = status;
            },

            getData: function () {
                var self = this;

                var conditions = {};

                if (self.selected != 999)
                    conditions.status = self.selected;

                http.get({
                            url: api + 'user/order',
                            jsonp: true,
                            data: conditions
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {
                                self.list = obj.data;
                            }
                        })
            },

            getStatusStr: function (status) {
                if (status == '0')
                    return "待支付";
                if ('10' <= status && status < '30')
                    return "待发货";
                if (status >= '30')
                    return "已发货";
                if (status == '9')
                    return "支付超时";
                if (status == '100')
                    return "已完成";
                if (status % 10 == 9)
                    return "已取消";

                return "未知状态,请联系客服";
            }
        }
    }
</script>

<style scoped>
    header {
        height: 44px;
        width: 100%;
        border-bottom: solid 1px #f0f0f0;
        background: white;
        position: fixed;
        z-index: 100;
    }

    .ui-btn-yellow.btn-pay {
        float: left;
        width: 70px;
        height: 26px;
        padding: 0;
        margin-top: 9px;
    }

    .frame-status {
        float: right;
        margin-right: 10px;
    }

    .label-status {
        font-size: 13px;
        color: #111;
    }

    .btn-cancel {
        float: left;
        color: #6f99d2;
        height: 44px;
        background-color: #fff;
        padding-right: 11px;
        margin-right: 10px;
        padding-left: 11px;
    }

    header > div {
        font-size: 14px;
        color: #888888;
        width: 25%;
        float: left;
        line-height: 44px;
        height: 44px;
        text-align: center;
    }

    header > div.select {
        color: #111111;
    }

    .header-holder {
        height: 44px;
    }

    .order-id {
        height: 36px;
        line-height: 36px;
    }

    .order-id > span {
        font-size: 12px;
        color: #888888;
    }

    .order-id > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .supplier-product-list .product > img {
        margin-left: 0;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .child-order-status {
        height: 36px;
        line-height: 36px
    }

    .bar-status .amout {
        height: 100%;
        float: left;
        display: inline-block;
    }

    .bar-status .amout > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .bar-status .amout > span {
        color: red;
        font-size: 15px;
    }

    .order-status {
        border-top: solid 1px #f0f0f0;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-top: solid 1px #f0f0f0;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }

    .tips {
        text-align: center;
        font-size: 12px;
        color: #888888;
        padding: 8px;
    }

</style>